<template>
  <div style="width: 100%; height: 100%">
    <div style="width: 100%; height: 100%" id="container"></div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "map-view",
  props: {
    //    夜晚模式
    darkblue: {
      type: Boolean,
      default: false,
    },
    baseInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      map: null,
      img: "",
    };
  },
  mounted() {
    console.log("mountedmountedmounted");
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "7746e65f36229bc8fb4300bd54cbb632",
      };
      AMapLoader.load({
        key: "dfa04570cb8469cef453a897e7a82914", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ElasticMarker"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          let style = {
            // 设置地图容器id
            viewMode: "2D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [113.63776, 34.75488], // 初始化地图中心点位置
          };
          if (this.darkblue) {
            style.mapStyle = "amap://styles/darkblue"; // 设置地图背景色样式
          }
          this.map = new AMap.Map("container", style); //创建地图实例
          let toolbar = new AMap.ToolBar(); //创建工具条插件实例
          this.map.addControl(toolbar); //添加工具条插件到页面
          let scale = new AMap.Scale();
          this.map.addControl(scale);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 批量添加的方法
    addMarkers(arr) {
      if (arr.length <= 0) return;
      arr.forEach((item) => {
        this.addMarker(item.x, item.y, item.color, item.params);
      });
    },
    // 单条添加的方法
    addMarker(x, y, color, params) {
      console.log(
        "批量添加的方法批量添加的方法批量添加的方法",
        x,
        y,
        color,
        params
      );
      switch (color) {
        case "red":
          this.img = require("@/assets/xd/userPositioningRed.png");
          break;
        case "blue":
          this.img = require("@/assets/xd/userPositioningGreen.png");
          break;
        case "yellow":
          this.img = require("@/assets/xd/userPositioningYellow.png");
          break;
        default:
          this.img = require("@/assets/xd/location4.png");
          break;
      }
      var text = new AMap.Text({
        text: params.name, //标记显示的文本内容
        anchor: "center", //设置文本标记锚点位置
        draggable: false, //是否可拖拽
        cursor: "pointer", //指定鼠标悬停时的鼠标样式。
        angle: 0, //点标记的旋转角度
        style: {
          //设置文本样式，Object 同 css 样式表
          padding: ".75rem",
          "margin-bottom": "1rem",
          "margin-top": "3.5rem",
          "margin-left": "8rem",
          "border-radius": ".25rem",
          "background-color": "transparent",
          width: "12rem",
          "border-width": 0,
          "text-align": "center",
          "font-size": "13px",
          color: "white",
        },
        position: [x, y], //点标记在地图上显示的位置
      });

      const icon = new AMap.Icon({
        size: new AMap.Size(160, 200), //图标尺寸
        image: this.img, //Icon 的图像
      });
      // 将 Icon 实例添加到 marker 上:
      const marker = new AMap.Marker({
        position: new AMap.LngLat(x, y), //点标记的位置
        icon: icon, //添加 Icon 实例
        title: "test",
        zooms: [2, 17], //点标记显示的层级范围，超过范围不显示
      });
     

      //在地图上添加编=标记
      this.map.add(marker);
      this.map.add(text);
    },
  },
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>
